import classNames from 'classnames';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';

import api from '@/api';
import HomeLayout from '@/business/HomeLayout';
import LoginModal from '@/business/LoginModal';
import PayModal from '@/business/PayModal';
import RyButton from '@/business/RyButton';
import Bottom from '@/components/Bottom';
import Image from '@/components/Image';
import req from '@/utils/req';
import useSetState from '@/utils/useSetState';

import icon1 from './images/icon1.svg';
import icon2 from './images/icon2.svg';
import icon3 from './images/icon3.svg';
import icon4 from './images/icon4.svg';
import icon5 from './images/icon5.svg';
import classes from './index.module.less';

const infoList = [
  { text: '每日绘画次数不限', icon: icon1 },
  { text: '创作超优质作品', icon: icon2 },
  { text: '查看公开作品提示词', icon: icon3 },
  { text: '下载公开作品', icon: icon4 },
  { text: '设定作品艺术值', icon: icon5 },
];
export type RightType = {
  number: number;
  id: number;
  type: 'coupon' | 'member';
  name: string;
  unit: string;
  unit_zh: string;
  tag: string;
  amount: string;
  pay_amount: string;
  desc: string;
  sort: number;
  btn: string;
  rights: string[];
};
export default function Vip() {
  const login = useSelector((state: RootState) => state.user.login);
  const platform = useSelector((state: RootState) => state.config.platform);
  const [{ coupon, member, vip }, setState] = useSetState({
    coupon: [] as RightType[],
    member: [] as RightType[],
    vip: 0,
  });

  useEffect(() => {
    req
      .get<{ coupon: RightType[]; member: RightType[] }>(api.goodsList)
      .then(({ coupon, member }) => {
        setState({
          coupon: coupon.map((t) => ({
            ...t,
          })),
          member: member.map((t) => ({
            ...t,
          })),
        });
      });
  }, [setState]);

  return (
    <HomeLayout title="会员" className={classes.wrap}>
      <div className={classes.overflow}>
        <div className={classes.overflowBox}>
          <div className={classes.title}>会员</div>
          {platform == 'ios' && <div className={classes.subTitle}>如需购买请咨询客服</div>}
          <div className={classes.box}>
            <div className={classes.vipbox}>
              {member.map((item, i) => (
                <div
                  onClick={() => setState({ vip: i })}
                  className={classNames(classes.vipitem, i == vip && classes.active)}
                  key={item.id}
                >
                  <div className={classes.viplabel}>{item.name}</div>
                  <div className={classes.count}>
                    <span className={classes.unit}>¥</span>
                    {item.pay_amount}
                    {item.amount && <span className={classes.discount}>¥{item.amount}</span>}
                  </div>
                  <div
                    style={{ background: i == 1 ? '#F64D36' : undefined }}
                    className={classes.viptip}
                  >
                    {item.tag}
                  </div>
                </div>
              ))}
            </div>
            <div className={classes.subBox}>
              <div className={classes.subtit}>5 项会员权益</div>
              <div className={classes.infoBox}>
                {infoList.map((item) => (
                  <div key={item.text} className={classes.infoItem}>
                    <Image src={item.icon} className={classes.subImg} />
                    {item.text}
                  </div>
                ))}
              </div>
            </div>
          </div>
          {platform !== 'ios' && (
            <>
              {login ? (
                <PayModal goodItem={member[vip]}>
                  <RyButton className={classes.btn}>立即购买</RyButton>
                </PayModal>
              ) : (
                <LoginModal>
                  <RyButton className={classes.btn}>立即购买</RyButton>
                </LoginModal>
              )}
            </>
          )}

          {coupon[0] && (
            <>
              <div className={classes.title} style={{ marginTop: 30 }}>
                绘画券包
              </div>
              {platform == 'ios' && <div className={classes.subTitle}>如需购买请咨询客服</div>}
              <div className={classNames(classes.box, classes.sbox)}>
                <div className={classes.sTitle}>{coupon[0].name}</div>
                <div className={classes.sPrice}>
                  <span className={classes.sNum}>{coupon[0].number}</span>/ 张{' '}
                  <span className={classes.sSNum}>{coupon[0].pay_amount}</span>/ 元
                </div>
                <div className={classes.sInfo}>按次使用，不享受会员权益</div>
              </div>
              {platform !== 'ios' && (
                <>
                  {login ? (
                    <PayModal goodItem={coupon[0]}>
                      <RyButton className={classes.btn}>立即购买</RyButton>
                    </PayModal>
                  ) : (
                    <LoginModal>
                      <RyButton className={classes.btn}>立即购买</RyButton>
                    </LoginModal>
                  )}
                </>
              )}
            </>
          )}
        </div>
      </div>
      <Bottom />
    </HomeLayout>
  );
}
